<template>
  <div class="profile-form">
    <el-form
        ref="profileFormRef"
        :model="profileData"
        :rules="profileRules"
        label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="profileData.username" disabled />
      </el-form-item>

      <el-form-item label="工号" prop="staffNo">
        <el-input v-model="profileData.staffNo" placeholder="请输入工号" />
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="profileData.name" placeholder="请输入真实姓名" />
      </el-form-item>

      <el-form-item label="职称" prop="title">
        <el-select v-model="profileData.title" placeholder="请选择职称" style="width: 100%">
          <el-option label="教授" value="教授" />
          <el-option label="副教授" value="副教授" />
          <el-option label="讲师" value="讲师" />
          <el-option label="助教" value="助教" />
          <el-option label="研究员" value="研究员" />
          <el-option label="副研究员" value="副研究员" />
          <el-option label="助理研究员" value="助理研究员" />
        </el-select>
      </el-form-item>

      <el-form-item label="所属教研室" prop="department">
        <el-input v-model="profileData.department" placeholder="请输入所属教研室" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="profileData.email" placeholder="请输入邮箱地址" />
      </el-form-item>

      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="profileData.phone" placeholder="请输入手机号码" />
      </el-form-item>

      <el-form-item label="在职状态" prop="status">
        <el-radio-group v-model="profileData.status">
          <el-radio :label="1">在职</el-radio>
          <el-radio :label="0">离职</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="form-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
        保存修改
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getProfile, updateProfile } from '@/api/profile'

const emit = defineEmits(['close'])

// 响应式数据
const submitLoading = ref(false)
const profileFormRef = ref()

// 表单数据
const profileData = reactive({
  id: null,
  username: '',
  name: '',
  staffNo: '',
  title: '',
  department: '',
  email: '',
  phone: '',
  status: 1
})

// 表单验证规则
const profileRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 32, message: '姓名长度在 2 到 32 个字符', trigger: 'blur' }
  ],
  staffNo: [
    { required: true, message: '请输入工号', trigger: 'blur' },
    { max: 32, message: '工号长度不能超过32个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  department: [
    { max: 64, message: '教研室名称长度不能超过64个字符', trigger: 'blur' }
  ],
  title: [
    { max: 32, message: '职称长度不能超过32个字符', trigger: 'blur' }
  ]
}

// 方法
const loadProfile = async () => {
  try {
    const response = await getProfile()
    Object.assign(profileData, response.data)
  } catch (error) {
    ElMessage.error('获取个人信息失败')
  }
}

const handleSubmit = async () => {
  try {
    if (!profileFormRef.value) return
    await profileFormRef.value.validate()

    submitLoading.value = true

    await updateProfile(profileData)
    ElMessage.success('个人信息更新成功')
    emit('close')

  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    submitLoading.value = false
  }
}

const handleCancel = () => {
  emit('close')
}

onMounted(() => {
  loadProfile()
})
</script>

<style scoped>
.profile-form {
  padding: 20px 0;
}

.form-footer {
  margin-top: 24px;
  text-align: right;
  border-top: 1px solid #e4e7ed;
  padding-top: 16px;
}
</style>